<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <div class="head-wrapper">
      <div class="head-one">
        <div class="head-one-left">
          <img src="./image/logo.jpg" alt="" srcset="">
        </div>
        <div class="head-one-right">
          <ul>
            <li>唯品会</li>
            <li>当当优品</li>
            <li>数字馆</li>
            <li>都看阅器</li>
          </ul>
        </div>
      </div>

      <div class="head-two">
        <ul>
          <li>首页</li>
          <li>图书</li>
          <li>音响</li>
          <li>童装</li>
          <li>服装</li>
          <li>鞋靴</li>
          <li>运动</li>
          <li>箱包</li>
          <li>美妆</li>
          <li>珠宝</li>
          <li>家具</li>
          <li>食品</li>
          <li>酒</li>
          <li>手机</li>
          <li>数码</li>
          <li>电脑</li>
          <li>家电</li>
        </ul>
      </div>

      <div class="head-three">
        <img src="./image/banner.png" alt="" srcset="">
      </div>
    </div>
    <div class="body-wrapper">
      <img src="./image/bg_bang.gif" alt="">

      <div class="book-list">
        <div class="book-left">
          <img src="./image/book-01.jpg" alt="">
          <img class="rank1" src="./image/bookNo1.gif" alt="">
          <div class="book-desc">
            <p><a href="#">偷影子的人</a></p>
            <span>作者：马克 著</span>
            <br>
            <span>出版社：湖南文艺出版社</span>
            <br>
            <span>当当价：</span>
            <span style="color: red;">￥ 17.90</span>
            <br>
            <span>不知道姓氏的克蕾儿，这就是你再我生命李的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的小男孩，因为拥有一种特殊能力而强大：她能“偷别人的影子”</span>
          </div>
        </div>

        <div class="book-right">
          <div>
            <img src="./image/book-02.jpg" alt="">
            <img class="rank2" src="./image/bookNo2.gif" alt="">
            <div class="book-desc">
              <p><a href="#">看见（央视知名记者，主持人柴静：十年个人成长的告白，中国社会变迁的备忘）</a></p>
              <span>作者：柴静 著</span>
              <br>
              <span>出版社：广西师范大学出版社</span>
              <br>
              <span style="color: red;">￥ 29.40</span>
              <span style="color:turquoise">7.4折</span>
            </div>
          </div>

          <div>
            <img src="./image/book-03.jpg" alt="">
            <img class="rank3" src="./image/bookNo3.gif" alt="">
            <div class="book-desc">
              <p><a href="#">改变孩子先改变自己</a></p>
              <span>作者：贾蓉稻 贾毅 著</span>
              <br>
              <span>出版社：作家出版社</span>
              <br>
              <span style="color: red;">￥ 22.40</span>
              <span style="color:turquoise">7.4折</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<style>
  .wrapper {
    width: 100%;
    height: 100%;
  }

  .head-wrapper {
    width: 90%;
    margin: 0 auto;
  }

  .head-one {
    height: 70px;
    display: flex;
    justify-content: space-between;
  }

  .head-one-left {
    width: 150px;
    height: 100%;
  }

  .head-one-left img {
    width: 100%;
  }

  .head-one-right {
    height: 100%;
  }

  .head-one-right ul {
    list-style: none;
    display: inline;
    border: 1px solid green;
    background-color: greenyellow;
  }

  .head-one-right ul li {
    display: inline-block;
    width: 80px;
    height: 40px;
  }

  .head-two {
    width: 100%;
  }

  .head-two ul {
    list-style: none;
    display: inline;
    border: 1px solid orange;
    background-color: orange;
    color: #fff;
  }

  .head-two ul li {
    display: inline-block;
    width: 80px;
    height: 40px;
  }

  .head-three {
    width: 100%;
    height: 120px;
  }

  .head-three img {
    width: 100%;
  }


  .body-wrapper {
    width: 90%;
    margin: 0 auto;
    border: 1px solid green;
    margin-top: 100px;
  }

  .body-wrapper .title-img {
    width: 150px;
    margin-top: 20px;
    margin-left: -12px;
  }

  .book-desc {
    display: inline-block;
    width: 400px;
    margin: 20px;
  }

  .book-left {
    position: relative;
    display: inline-block;
    width: 60%;
  }

  .book-right {
    position: relative;
    display: inline-block;
  }

  .rank1 {
    position: absolute;
    top: 8px;
    left: 24px;
  }
  .rank2 {
    position: absolute;
    top: 70px;
    left: 0px;
  }
  .rank3 {
    position: absolute;
    top: 265px;
    left: 0px;
  }
  a {
    text-decoration: none;
  }
</style>

</html>